import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function InvestorRelations() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.investorRelations')} - 豆豆Pay`,
    description: t('seo.pages.investorRelations.description')
  });
  const hreflangTags = generateHreflangTags('/investor-relations');
  const structuredData = generateStructuredData(seoConfig, 'website');
  
  // 投资者关系子页面数据
  const investorSections = [
    {
      title: t('header.regularReports'),
      description: t('investor.regularReportsDesc'),
      icon: 'fa-file-alt',
      link: '/investor-relations/regular-reports',
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=financial%20reports%2C%20investor%20relations%2C%20annual%20statements&sign=3aa2a6509df35457eccfc8552f267da4'
    },
    {
      title: t('header.investorActivities'),
      description: t('investor.investorActivitiesDesc'),
      icon: 'fa-calendar-alt',
      link: '/investor-relations/activities',
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=investor%20meeting%2C%20conference%20room%2C%20business%20presentation&sign=836c439ce68047eb56f73f3c71882a58'
    },
    {
      title: t('header.newsUpdates'),
      description: t('investor.newsUpdatesDesc'),
      icon: 'fa-newspaper',
      link: '/investor-relations/news',
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=financial%20news%2C%20stock%20market%2C%20business%20headlines&sign=fc27a27e574e8cd28b6ac918b37c6c48'
    }
  ];
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-gray-50 to-gray-100">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
                {t('header.investorRelations')}
              </h1>
              <div className="w-20 h-1 bg-gray-600 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
                {t('investor.intro')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 投资者关系子页面 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
              {investorSections.map((section, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="group bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <div className="h-56 overflow-hidden">
                    <img 
                      src={section.imageUrl} 
                      alt={section.title} 
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                    />
                  </div>
                  <div className="p-6">
                    <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 mb-4">
                      <i className={`fa-solid ${section.icon} text-xl`}></i>
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-gray-700 transition-colors">
                      {section.title}
                    </h3>
                    <p className="text-gray-600 mb-6">
                      {section.description}
                    </p>
                    <Link 
                      to={section.link}
                      className="inline-flex items-center text-gray-700 font-medium hover:text-gray-900 transition-colors"
                    >
                      {t('about.learnMore')}
                      <i className="fa-solid fa-arrow-right ml-2 text-sm"></i>
                    </Link>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
        
        {/* 投资者联系方式 */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
              className="max-w-3xl mx-auto text-center"
            >
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">
                {t('investor.contactTitle')}
              </h2>
              <p className="text-lg text-gray-700 mb-8">
                {t('investor.contactDesc')}
              </p>
              <a 
                href="mailto:investor@example.com" 
                className="inline-block px-8 py-4 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-md transition-colors shadow-md hover:shadow-lg"
              >
                {t('investor.contactBtn')}
              </a>
            </motion.div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}